import {Component, HostListener, Input, OnInit, ViewChild} from "@angular/core";
import {OnekeyRepairViewComponent} from "../../views/onekey-repair-view/onekey-repair-view.component";
import {PaymentViewComponent} from "../../views/payment-view/payment-view.component";
import {LocalStorage} from "../../app.local-storage";
import {UserModel} from "../../model/user.model";
import {ROUTE} from "../../service/route.service";
import {LoginModalViewComponent} from "../../views/login-modal-view/login-modal-view.component";
import {USER} from "../../service/user.service";
import {LifepaymentModalViewComponent} from "../../views/lifepayment-modal-view/lifepayment-modal-view.component";


@Component({
  selector: 'app-side-button',
  template: `
    <div class="icon" [ngStyle]="{'background': 'url('+icon+') no-repeat center'}"></div>
    <div class="detail" *ngIf="title || detail">
      <img *ngIf="detail" [src]="detail" alt="">
      {{title}}
    </div>
  `,
  styles: [`
    :host {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 10px;
      width: 36px;
      height: 36px;
      background-color: #90c31f;
      border-radius: 18px;
    }

    .icon {
      width: 100%;
      height: 100%;
      background-size: 55% !important;
    }

    .detail {
      color: white;
      font-size: 1.3rem;
      position: absolute;
      z-index: -1;

      background-color: #90c31f;

      min-height: 36px;
      box-sizing: border-box;
      padding: 5px;

      align-items: center;
      justify-content: center;
      flex-direction: column;
      min-width: 88px;

      display: flex;
      right: -100%;
      opacity: 0;
      animation: detail-slide-out .2s ease-out;
    }

    .detail img {
      margin-bottom: 8px;
      width: 80px;
      height: 80px;
    }

    :host:hover .detail {
      animation: detail-slide-in .15s ease-in;
      right: calc(100% + 8px);
      opacity: 1;
    }

    /* 连接部分 */
    .detail:after {
      position: absolute;
      /* 对其到右边 */
      right: calc(0px - (18px + 8px));
      /* 垂直居中 */
      top: calc((100% - 36px) / 2);
      width: calc(18px + 8px);
      height: 36px;
      content: '';
      background-color: #90c31f;
    }

    @keyframes detail-slide-in {
      from {
        right: -100%;
        opacity: .5;
      }
      to {
        right: calc(100% + 8px);
        opacity: 1;
      }
    }

    @keyframes detail-slide-out {
      from {
        right: calc(100% + 8px);
        opacity: 1;
      }
      to {
        right: -100%;
        opacity: .5;
      }
    }
  `]
})
export class SideButtonComponent implements OnInit {

  @Input() icon: String;
  @Input() title: String;
  @Input() detail: String;

  constructor() {
  }

  ngOnInit() {
  }

}

@Component({
  selector: 'app-side-navbar',
  templateUrl: './side-navbar.component.html',
  styleUrls: ['./side-navbar.component.scss'],
  viewProviders: [SideButtonComponent]
})
export class SideNavbarComponent implements OnInit {
  @ViewChild(LoginModalViewComponent) public loginModal:any;
  @ViewChild(OnekeyRepairViewComponent) public repairModal:any;
  @ViewChild(PaymentViewComponent) public paymentModal:any;

  showLoginModal: boolean = false;

  user: any;
  buttons:any = [
    {
      icon: 'assets/images/index_pay.png',
      title: '一键缴费',
      onClick:this.showPaymentModal.bind(this)
    },
    {
      icon: 'assets/images/index_repair.png',
      title: '一键报修',
      onClick:this.showRepairModal.bind(this)
    },
    {
      icon: 'assets/images/index_QRcode.png',
      title: '服务尽在掌握',
      detail: 'assets/images/index_QRcode.jpg'
    },
    {icon: 'assets/images/index_top.png', onClick: this.gotoTop, name: 'goto-top'},
  ];

  hide:any = {};

  constructor(private ls:LocalStorage,
              private route:ROUTE,
              private USER: USER) {

  }

  ngOnInit() {
    if(this.USER.get()){
      this.user = this.USER.get();
    }
    this.hide['goto-top'] = true;

  }


  gotoTop() {
    window.scrollTo(0, 0);
  }

  showRepairModal(item:any){
    if(this.USER.get()==null){
      this.showLoginModal = true;
    }else {
      this.repairModal.showModal();
    }
  }
  closeLogin(result:Object){
    if(result instanceof UserModel){
      this.user=result;
      this.USER.update(result);
    }
    this.showLoginModal=false;
  }

  closeRepairModal(result: Object) {
    this.repairModal.onHidden();
  }

  showPaymentModal(){
    if(this.USER.get()==null){
      this.showLoginModal = true;
    }else {
      this.paymentModal.showModal();
    }
  }

  closePaymentModal(result:Object){
    this.paymentModal.onHidden();
  }

  @HostListener('window:scroll')
  onWindowScroll() {
    this.hide['goto-top'] = window.scrollY < window.innerHeight;
  }

  // ensureLogin() {
  //   if(this.USER.get()==null){
  //     this.showLoginModal = true;
  //     return false;
  //   }
  //   return true;
  // }
}
